<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Flodolist</title>
  <meta name="description" content="Small to-do list app.">
  <meta name="author" content="Christian Rotzoll">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
  <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
  {% block css %}{% endblock %}

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/site.js') }}"></script>
  {% block js %}{% endblock %}
  <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/favicon.png') }}" />
</head>

<body>
  <div class="container">
    <div class="navbar-spacer"></div>
    <nav class="navbar">
      <div class="container">
        <ul class="navbar-list">
          <li class="navbar-item"><a class="navbar-link" href="{{ url_for('main.index') }}">Flodolist</a></li>
          {% if not current_user.is_authenticated %}
            <li class="navbar-item">
              <a class="navbar-link" href="{{ url_for('auth.login') }}">Login</a>
            </li>
          {% else %}
            <li class="navbar-item">
              <a class="navbar-link" href="#" data-popover="#moreNavPopover">{{ current_user.username }}</a>
              <div id="moreNavPopover" class="popover">
                <ul class="popover-list">
                  <li class="popover-item">
                    <a class="popover-link" href="{{ url_for('main.todolist_overview') }}">Your Todolists</a>
                  </li>
                  <li class="popover-item">
                    <a class="popover-link" href="{{ url_for('auth.logout') }}">logout</a>
                  </li>
                </ul>
              </div>
            </li>
            {% endif %}
        </ul>
      </div>
    </nav>
    {% block body %}{% endblock %}
  </div>
</body>
</html>
